<template>
	<view class="sliding">
		<view class="box">
			<view class="title">
				<text>设置封面</text>
			</view>
			<view class="picture">
				<block v-for="(item,index) in img" :key="index">
					<image :src="item.url" mode="aspectFill" @click="changeBgImg(item.url)"></image>
				</block>
				<button @click="CustomBg" class="mybutton">自定义背景</button>
				<button class="mybutton" @click="chooseAColor(4)">纯色背景</button>
			</view>
		</view>
		<view class="box">
			<view class="title">
				<text>设置提交按钮颜色</text>
			</view>
			<button class="mybutton" @click="chooseAColor(5)">选择按钮颜色</button>
		</view>
		<view class="box">
			<view class="title">
				<text>文字格式</text>
			</view>
			<button class="mybutton" @click="chooseAColor(6)">标题颜色</button>
			<button class="mybutton" @click="chooseAColor(7)">题干文字颜色</button>
			<view class="custom">
				<view class="uni-list-cell-db">题干字体:</view>
				<input class="myinput" type="number" v-model="titleSize">
			</view>
			<view class="custom">
				<view class="uni-list-cell-db">选项字体:</view>
				<input class="myinput" type="number" v-model="textSize">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img:[
					{url:"https://photo.16pic.com/00/87/74/16pic_8774560_b.jpg"}
				],
			};
		},
		props:["titleSize",'textSize'],
		watch:{
			titleSize:{
				handler(newvalue){
					this.$emit('changeTitleSize',newvalue)
				},
				immediate:true
			},
			textSize:{
				handler(newvalue){
					this.$emit('changeTextSize',newvalue)
				},
				immediate:true
			}
		},
		methods:{
			changeBgImg(url){
				this.$emit('changeBgImg',true,url)
			},
			CustomBg(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async(res) => {
						console.log(res);
						var tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title: '正在上传中...'
						})
						for (let temp of tempFilePaths) {
							// 图片上传服务器
							await uni.uploadFile({
								url: this.url+'/PictureController/fileUpload',
								filePath: temp,
								name: 'file',
								formData:{
									'formid':this.$parent.$parent.formid,
									'PhotoType':3
								},
								success: res => {
									console.log(res);
									let img = JSON.parse(res.data).data.imageLink
									console.log(img);
									// 上传完成后处理
									this.$emit('changeBgImg',true,img) //需要更换为线上图片地址
									uni.hideLoading()
								},
							});
						}
					}
				});
			},
			chooseAColor(type){
				this.$emit('Color',type)
			},
		}
	}
</script>

<style lang="less" scoped>
	.sliding{
		overflow-x: hidden; 
		overflow-y: scroll; 
		-webkit-overflow-scrolling: touch; 
		height: 100vh;
	}
	::-webkit-scrollbar{display:none;}
	text{
			font-size: 12px;
		}
	.title{
		text-align: center;
		margin: 10rpx 0 10rpx 0;
	}
	.custom{
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-left: 30rpx;
		margin-top: 30rpx;
	}
	image{
		width: 40%;
		height: 200rpx;
		margin-left: 3%;
		margin-top: 10rpx;
	}
	image:nth-child(odd){
		margin-left: 8%;
	}
	.mybutton{
		width: 82%;
		background-color: #80b156;
		color: white;
		font-size: 12px;
		margin: 30rpx auto 30rpx auto;
	}
	.uni-list-cell-db{
		font-size: 16px;
	}
	.myinput{
		width: 30%;
		margin-right: 4vw;
		border: 1px solid #c3c3c3;
	}
</style>
